<template>
  <el-select
    v-model="inputValue"
    :disabled="disabled"
    :placeholder="placeholder"
    :clearable="!isAll"
    :filterable="filterable"
    v-bind="$attrs"
  >
    <el-option v-if="isAll" label="全部" value=""></el-option>
    <el-option v-for="(label, key) in dataOptions" :key="key" :label="label" :value="useKey ? key : label">{{
      label
    }}</el-option>
  </el-select>
</template>

<script>
export default {
  name: "TSelector",
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: [String, Number, Array],
      default: "",
    },
    /**
     * 字典标识，默认 审批状态
     */
    dictCode: {
      type: String,
      default: "inst_appro_status",
    },
    /**
     * 禁用状态
     */
    disabled: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否可搜索
     */
    filterable: {
      type: Boolean,
      default: false,
    },
    /**
     * 占位符
     */
    placeholder: {
      type: String,
      default: "",
    },
    /**
     * 是否包含全部选项
     */
    isAll: {
      type: Boolean,
      default: true,
    },
    /**
     * 是否使用 key作为value值
     */
    useKey: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    // 选中值
    inputValue: {
      get() {
        return this.value;
      },
      set(val) {
        const label = val ? this.dataOptions[val] : "";
        this.$emit("change", val, label);
      },
    },
    // 选择器数据源
    dataOptions() {
      const dictList = { ...this.$store.state.data.KV_MAP[this.dictCode] };
      if (["inst_appro_status"].includes(this.dictCode)) {
        for (const key in dictList) {
          dictList[key] = dictList[key].split("-")[0];
        }
      }
      return dictList || {};
    },
  },
};
</script>

<style lang="scss" scoped>
[multiple] {
  border: none;
}

.el-select {
  padding: 0 !important;
}
</style>
